<script setup lang="ts">
import { BookOutlined,TeamOutlined,TagsOutlined} from '@ant-design/icons-vue';
import { debounce } from 'lodash-es';
import { ref, onMounted, onBeforeUnmount, reactive} from 'vue';
import { useLoginStore } from '@/store/login';
import { storeToRefs } from 'pinia';
import { useRouter} from 'vue-router';
import { message } from 'ant-design-vue';

const router = useRouter();
const loginStore = useLoginStore();
const showDropdown = ref(false);
const menuWrapper = ref<HTMLElement | null>(null);
const loginModalOpen = ref<boolean>(false);
const isRegister=ref(false)
let {isLogin,userLevel,name} = storeToRefs(loginStore);
let userData=ref({
  account:'',
  password:'',
  userType:'2',
  nickName:'',
  
})

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value;
};

const closeDropdown = (e:any) => {
  if(!menuWrapper.value) return;
  if (!menuWrapper.value.contains(e.target)) {
    showDropdown.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', closeDropdown);
});

onBeforeUnmount(() => {
  document.removeEventListener('click', closeDropdown);
});
const personalInfo = () => {
  console.log('查看个人资料');
};

const logout = async() => {
  loginStore.isLogin=false
  loginStore.userLevel='2'
  await router.push('/')
  window.location.reload();
};
// 弹窗
const loginModalShow=()=>{
  loginModalOpen.value=true
}
const handleOk = (e: MouseEvent) => {
  console.log(e);
  loginModalOpen.value = false;
};
const toRegister=()=>{
    isRegister.value=true;
}

const toLogin=()=>{
    isRegister.value=false;
}

const login= async()=>{
    if(userData.value.account==='')
        message.warning('请输入账号',1.5)
    if(userData.value.password==='')
        message.warning('请输入密码',1.5)
    const user= userData.value.userType==='2'?await loginStore.commonLogin(userData.value):await loginStore.administorLogin(userData.value)
    loginStore.name=user.data.data.name
    loginModalOpen.value=false
    loginStore.isLogin=true
    loginStore.userLevel=userData.value.userType
    // console.log(typeof userLevel.value);
    await router.push('/')
    window.location.reload(); 
    message.success('登录成功',1.5)
}
const userRegister=async()=>{
    if(userData.value.account==='')
        message.warning('请输入账号',1.5)
    if(userData.value.password==='')
        message.warning('请输入密码',1.5)
    if(userData.value.nickName==='')
        message.warning('请输入昵称',1.5)
    const newUser= await loginStore.userRegister(userData.value)
    console.log(newUser.data.data.name);
    
}
const debouncedClick = debounce(login, 800);
const debouncedRegister = debounce(userRegister, 800);
</script>

<template>
  <div>
    <div class="app">
      <div id="Logo">
        <img src="http://47.116.207.219/image/logo.png">
        <strong style="font-size: x-large;">ZSDN</strong>
      </div>
      <div class="linkStyle">
        <div class="rlinkDiv">
          <router-link to="/articlesManage" class="rlink" activeClass="router-link-active">
            <div class="line"><BookOutlined /><span id="spanStyle">文章管理</span></div>
          </router-link>
        </div>
        <div class="rlinkDiv">
          <router-link to="/userManage" class="rlink" activeClass="router-link-active"><TeamOutlined />
            <div class="line"><span id="spanStyle">用户管理</span></div>
          </router-link>
        </div>
        <div class="rlinkDiv">
          <router-link to="/labelManage" class="rlink" activeClass="router-link-active"><TagsOutlined />
            <div class="line"><span id="spanStyle">标签管理</span></div>
          </router-link>
        </div>
      </div>
      <div class="blog-info">
        <div v-if="isLogin" style="display: flex; align-items: center; justify-content: space-around;">
          <div class="user-menu-wrapper" ref="menuWrapper">
            <div class="user-avatar" @click="toggleDropdown">
            <img src="http://47.116.207.219/image/login/defaultFilePath.png" style="border-radius: 100%;width: 32px;height: 32px;">
            <span class="user-name">{{ name }}</span>
            </div>
            <div v-if="showDropdown" class="dropdown">
                <div class="dropdown-item" @click="personalInfo">个人资料</div>
                <div class="dropdown-item" @click="logout">退出登录</div>
            </div>
          </div>
        </div>
        <div v-else>
          <a-button type="text" @click="loginModalShow" class="loginInButton" >请登录</a-button>
          <a-modal v-model:open="loginModalOpen" @ok="handleOk" :footer="null" :maskClosable="false" wrapClassName="loginModal">
            <div style="display: flex; align-items: center; justify-content: center;">
              <h1>用户{{ isRegister ? '注册' : '登录'}}</h1>
            </div>
            <form @submit.prevent="login">
              <div style=" flex-direction: column;">
                  <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;">
                      <p><span style="color: red;">*</span><span>用户账号：</span></p>
                      <a-input v-model:value="userData.account" placeholder="" style="width: 18.5vw;"/>
                  </div>
                  <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;">
                      <p><span style="color: red;">*</span><span>密码：</span></p>
                      <a-input-password  v-model:value="userData.password" placeholder="" style="width: 18.5vw;"/>
                  </div>
                  <div v-if="!isRegister" style="display: flex; align-items: center; flex-direction: column;">
                      <div style="display: flex; align-items: center; width: 52%;">
                          <div style="width: 25%; display: flex ; justify-content: space-between;">
                              <p style="justify-content: flex-end;"><span style="color: red;" >*</span><span>类型：</span></p>
                          </div>
                          <div style="width: 75%; display: flex; justify-content: space-between;">
                              <a-radio-group v-model:value="userData.userType" style="display: flex; justify-content: flex-start; width: 100%;">
                                  <a-radio value='2' style="width: 50%;">用户</a-radio>
                                  <a-radio value='1' style="width: 50%;">管理员</a-radio>
                              </a-radio-group>
                          </div>
                      </div>
                      <div style="display: flex; justify-content: space-between; align-items: center; width: 52%; margin-top: 20px;">
                          <a-button type="submit" class="modalButtonLogin" @click="debouncedClick">登录</a-button>
                          <a-button type="primary" class="modalButtonRegister" @click="toRegister">注册</a-button>
                      </div>
                  </div>
                  <div v-else style="display: flex; align-items: center; flex-direction: column;">
                      <div style="display: flex; align-items: center; width: 100%; justify-content: flex-end;">
                          <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;">
                          <p><span style="color: red;">*</span><span>社交昵称：</span></p>
                          <a-input  v-model:value="userData.nickName" placeholder="" style="width: 18.5vw;"/>
                          </div>
                      </div>
                      <div style="display: flex; justify-content: space-between; align-items: center; width: 52%; margin-top: 20px;">
                          <a-button type="primary" class="modalButtonLogin" @click="toLogin">返回登录</a-button>
                          <a-button type="primary" class="modalButtonRegister" @click="debouncedRegister">注册</a-button>
                      </div>
                  </div>
              </div>
            </form>
          </a-modal>
        </div>
      </div>
    </div>
  </div>
    <RouterView></RouterView>
  
</template>

<style scoped>
  #Logo{
    margin-left: 50px;
    align-items: center;
    text-align: start;
    display: flex;
    height: 100%;
    width: 10%;
  }
  .rlinkDiv{
    text-decoration: none;
    height: 100%;
    width: 40%;
    margin: 0 5px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .rlink{
    text-decoration: none;
    height: 100%;
    margin: 0 5px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: black;
    border-bottom: 2px solid white;
  }
  .rlink:hover{
    color: rgb(42, 125, 214);
    border-bottom: 2px solid #1890ff;
  }
  .rlink:active {
    color: rgb(42, 125, 214);
    border-bottom: 2px solid #1890ff;
  }
  .rlink.router-link-active{
    color: rgb(42, 125, 214);
    border-bottom: 2px solid #1890ff;
  }
  .line{
    display: flex;
    align-items: center;
     justify-content: center;
  }

  #login{
    display: flex;
    align-items: center;
    height: 100%;
    width: 20%;
  }
  .app{
  display: flex;
  height: 7vh;
  width: 95vw;
  margin-left: 5VW;
  margin-bottom: 5px;
  }
  .linkStyle{
    display: flex;
    align-items: center;
    justify-items: center;
    height: 100%;
    width: 60%;

  }
  #spanStyle{
    font-size: large;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 4px;
  }
  img{
    height: 50px;
    width: 50px
  }
  #link-icon{
    display: flex;
    align-items: center;
  }

  .blog-info {
    display: flex;
    align-items: center;
    margin-left: 5vw;
    height: 100%;
    width: 20%;
  }

  .user-menu-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  }

  .user-avatar {
    display: flex;
    align-items: center;
  }

  .avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .user-name {
    margin-left: 8px;
    color: #1d75cf;
    font-weight: bold;
  }

  .dropdown {
    position: absolute;
    top: 48px;
    left: 0;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border-radius: 4px;
    z-index: 999;
    width: 120px;
    padding: 10px 0;
    text-align: center;
  }

  .dropdown-item {
    padding: 8px 16px;
    color: #1d75cf;
    cursor: pointer;
  }

  .dropdown-item:hover {
    background-color: #f0f0f0;
  }

  .loginModal{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
  }

  /* 按钮区 */
  .loginInButton,
  .loginInButton:focus,
  .loginInButton:hover,
  .loginInButton:active{
    width: 40%;
    background-color: white;
    color:#1d75cf;
    font-size: large;
  }

  .modalButtonLogin{
    background-color: #2e8cea;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
  }
  .modalButtonRegister{
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    outline: 2px solid rgba(128, 128, 128, 0.9);
  }
  .modalButtonRegister:hover{
    background-color: rgba(243, 242, 242, 0.6);
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    outline: 2px solid rgba(128, 128, 128, 0.6);
  }
</style>